/**
 * 选中文本面板组件
 * 显示编辑器中选中的文本，提供展开/折叠、复制等功能
 */
import React, { useState } from 'react';
import {
    Box,
    Typography,
    IconButton,
    Chip,
    Tooltip,
    useTheme,
    alpha
} from '@mui/material';
import {
    KeyboardArrowDown as KeyboardArrowDownIcon,
    KeyboardArrowUp as KeyboardArrowUpIcon,
    ContentCopy as CopyIcon,
    Check as CheckIcon,
    FormatQuote as FormatQuoteIcon
} from '@mui/icons-material';

interface SelectedTextPanelProps {
    text: string;
    isExpanded: boolean;
    toggleExpanded: () => void;
    locationInfo?: string;
    onCopyText?: () => void;
}

/**
 * 选中文本面板：显示编辑器中当前选中的文本内容
 */
const SelectedTextPanel: React.FC<SelectedTextPanelProps> = ({
    text,
    isExpanded,
    toggleExpanded,
    locationInfo,
    onCopyText
}) => {
    const theme = useTheme();
    const [copied, setCopied] = useState(false);

    // 处理复制文本
    const handleCopy = () => {
        navigator.clipboard.writeText(text);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
        if (onCopyText) onCopyText();
    };

    return (
        <Box
            sx={{
                width: '100%',
                borderTop: isExpanded
                    ? `1px solid ${theme.palette.divider}`
                    : `2px solid ${alpha(theme.palette.primary.main, 0.7)}`,
                maxHeight: isExpanded ? '160px' : '30px',  // 增加展开状态下的最大高度
                transition: 'max-height 0.25s ease-in-out, background-color 0.2s ease',
                overflow: 'hidden',
                backgroundColor: isExpanded
                    ? theme.palette.background.paper
                    : alpha(theme.palette.primary.main, 0.04),
                boxShadow: isExpanded ? `0 -1px 4px ${alpha(theme.palette.common.black, 0.05)}` : 'none',
                zIndex: 10,
                position: 'relative',
                borderRadius: '4px',
                '&:hover': {
                    backgroundColor: isExpanded 
                        ? theme.palette.background.paper 
                        : alpha(theme.palette.primary.main, 0.07)
                }
            }}
        >
            {/* 标题栏（始终可见） */}
            <Box
                sx={{
                    display: 'flex',
                    alignItems: 'center',
                    padding: '4px 10px',
                    justifyContent: 'space-between',
                    borderBottom: isExpanded ? `1px solid ${alpha(theme.palette.divider, 0.8)}` : 'none',
                    cursor: 'pointer',
                    height: '30px',
                    boxSizing: 'border-box',
                    transition: 'background-color 0.2s ease',
                    '&:hover': {
                        backgroundColor: isExpanded 
                            ? alpha(theme.palette.action.hover, 0.05)
                            : 'transparent'
                    }
                }}
                onClick={toggleExpanded}
            >
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    <FormatQuoteIcon
                        fontSize="small"
                        color={isExpanded ? "inherit" : "primary"}
                        sx={{ fontSize: '0.85rem', transform: 'scaleX(-1)' }}
                    />
                    <Typography
                        variant="subtitle2"
                        sx={{
                            fontSize: '0.75rem',
                            fontWeight: 500,
                            color: isExpanded ? 'text.secondary' : 'primary.main'
                        }}
                    >
                        已选中文本
                    </Typography>
                    <Chip
                        size="small"
                        label={`${text.length} 字符`}
                        sx={{
                            ml: 0.5,
                            height: 16,
                            fontSize: '0.65rem',
                            fontWeight: 400,
                            backgroundColor: isExpanded
                                ? alpha(theme.palette.grey[500], 0.1)
                                : alpha(theme.palette.primary.main, 0.1),
                            color: isExpanded ? 'text.secondary' : 'primary.main',
                            border: 'none',
                            '& .MuiChip-label': {
                                px: 0.75,
                                py: 0
                            }
                        }}
                    />
                </Box>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
                    {isExpanded && (
                        <Tooltip title="复制文本">
                            <IconButton
                                size="small"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    handleCopy();
                                }}
                                sx={{ 
                                    p: 0.25,
                                    color: copied ? 'success.main' : 'action.active',
                                    '&:hover': {
                                        backgroundColor: alpha(theme.palette.action.hover, 0.1)
                                    },
                                    '& .MuiSvgIcon-root': {
                                        fontSize: '0.85rem'  // 缩小图标
                                    }
                                }}
                            >
                                {copied ? <CheckIcon fontSize="small" /> : <CopyIcon fontSize="small" />}
                            </IconButton>
                        </Tooltip>
                    )}
                    <IconButton
                        size="small"
                        onClick={(e) => {
                            e.stopPropagation();
                            toggleExpanded();
                        }}
                        sx={{ 
                            p: 0.25,
                            color: 'action.active',
                            transition: 'transform 0.2s',
                            transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)',
                            '&:hover': {
                                backgroundColor: alpha(theme.palette.action.hover, 0.1)
                            },
                            '& .MuiSvgIcon-root': {
                                fontSize: '0.85rem'  // 缩小图标
                            }
                        }}
                    >
                        {isExpanded
                            ? <KeyboardArrowUpIcon fontSize="small" />
                            : <KeyboardArrowDownIcon fontSize="small" />
                        }
                    </IconButton>
                </Box>
            </Box>

            {/* 文本内容区（仅在展开时有内容） */}
            <Box
                sx={{
                    p: 1.25,  // 减少水平内边距
                    pt: 0.75,  // 进一步减少顶部内边距
                    pb: 0.75,  // 进一步减少底部内边距
                    maxHeight: '100px',  // 增加一些最大高度
                    overflow: 'auto',
                    backgroundColor: alpha(theme.palette.background.paper, 0.7),
                    backdropFilter: 'blur(8px)',
                    '&::-webkit-scrollbar': {
                        width: '6px',
                        height: '6px',
                    },
                    '&::-webkit-scrollbar-track': {
                        background: alpha(theme.palette.divider, 0.1)
                    },
                    '&::-webkit-scrollbar-thumb': {
                        background: alpha(theme.palette.divider, 0.3),
                        borderRadius: '3px',
                        '&:hover': {
                            background: alpha(theme.palette.divider, 0.5)
                        }
                    }
                }}
            >
                <Typography
                    variant="body2"
                    sx={{
                        whiteSpace: 'pre-wrap',
                        fontSize: '0.8125rem',
                        color: theme.palette.text.primary,
                        lineHeight: 1.3,
                        textIndent: 0,
                        wordBreak: 'break-word',
                        overflowWrap: 'break-word',
                        letterSpacing: '-0.01em',
                        paddingLeft: '2em',
                        paddingRight: '0.5em',
                        display: 'block'
                    }}
                >
                    {text || ''}
                </Typography>


            </Box>
        </Box>
    );
};

export default React.memo(SelectedTextPanel); 